<%--
  Created by IntelliJ IDEA.
  User: 22936
  Date: 2022/4/29
  Time: 10:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="multipart/form-data;charset=utf-8">
    <title>添加共享资源</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="../../static/img/book.ico">
</head>
<body>
<jsp:include page="top.jsp" flush="true"></jsp:include>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>新增书籍</small>
                </h1>
            </div>
        </div>
    </div>
    <form id="fileForm" action="${pageContext.request.contextPath}/book/addBook" enctype="multipart/form-data" method="post">
        书籍名称：<input readonly unselectable="on" type="text" name="bookName" id="bookName">
        书籍数量：<input type="text" name="bookCounts"><br>
        书籍详情：<input type="text" name="detail">
        文件类型：<input readonly unselectable="on" type="text" name="suffix" id="fileSuffix">
        <br><br><br>
        <input type="submit" value="添加">
        <input id="file" type="file" name="file" multiple="multiple">
        <input type="button" onclick="uploadBtn()" value="上传">
    </form>

</div>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script>
    function uploadBtn() {
        let formData = new FormData($("#fileForm")[0]);
        let fileName= $("#file").val();
        $("#bookName").attr("value",fileName.substring(fileName.lastIndexOf("\\")+1,fileName.lastIndexOf(".")));
        $("#fileSuffix").attr("value",fileName.substring(fileName.lastIndexOf(".")));
        $.post({
            url: "${pageContext.request.contextPath}/file/upload",
            data: formData,
            cache: false,//上传文件不需要缓存
            processData: false,// 告诉jQuery不要去处理发送的数据
            contentType: false,// 告诉jQuery不要去设置Content-Type请求头,就不是默认的application/x-www-form-urlencoded了
            success: function (data) {
                alert(data.toString());
            }
        });
    }
</script>
</body>
</html>
